<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">

    <style>
        .date-icon{
            position: absolute;
            top: 0px;
            right: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="container" class="layuimini-container" style="background: none;">
    <div class="layuimini-main" style="margin: 0px;">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header" style="background: #1E9FFF;color: white;">
                        <h4><b>SHQC转账手续费</b></h4>
                        <div style="width: 50px;position: absolute;right: 0;top: 0;cursor: pointer;" @click="shqcTransferDetail">明细 > </div>
                    </div>
                    <div class="layui-card-body">
                        <div style="height: 50px;">
                            <div style="float: left;width: 50%;text-align: center;">
                                <div style="font-size: 24px;font-weight: bold;" v-text="transStatInfo.totalCurrency==0?0:(transStatInfo.totalCurrency?transStatInfo.totalCurrency:'--')"></div>
                                <div style="color: #595959">累积</div>
                            </div>

                            <div style="float: right;width: 50%;text-align: center;">
                                <div style="font-size: 24px;font-weight: bold;" v-text="transStatInfo.yesCurrency==0?0:(transStatInfo.yesCurrency?transStatInfo.yesCurrency:'--')"></div>
                                <div style="color: #595959">昨日</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header" style="background: #0EC66A;color: white;">
                        <h4><b>USDT提币手续费</b></h4>
                        <div style="width: 50px;position: absolute;right: 0;top: 0;cursor: pointer;" @click="mentionDetail('USDT提币申请单查询','1000')">明细 > </div>
                    </div>
                    <div class="layui-card-body">
                        <div style="height: 50px;">
                            <div style="float: left;width: 50%;text-align: center;">
                                <div style="font-size: 24px;font-weight: bold;" v-text="usdtMentionStatInfo.totalCurrency== 0 ? 0:(usdtMentionStatInfo.totalCurrency?usdtMentionStatInfo.totalCurrency:'--')"></div>
                                <div style="color: #595959">累积</div>
                            </div>

                            <div style="float: right;width: 50%;text-align: center;">
                                <div style="font-size: 24px;font-weight: bold;" v-text="usdtMentionStatInfo.yesCurrency==0?0:(usdtMentionStatInfo.yesCurrency?usdtMentionStatInfo.yesCurrency:'--')"></div>
                                <div style="color: #595959">昨日</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header" style="background: #F39800;color: white;">
                        <h4><b>SHQC提币手续费</b></h4>
                        <div style="width: 50px;position: absolute;right: 0;top: 0;cursor: pointer;" @click="mentionDetail('SHQC提币申请单查询','2000')">明细 > </div>
                    </div>
                    <div class="layui-card-body">
                        <div style="height: 50px;">
                            <div style="float: left;width: 50%;text-align: center;">
                                <div style="font-size: 24px;font-weight: bold;" v-text="shqcMentionStatInfo.totalCurrency==0?0:(shqcMentionStatInfo.totalCurrency?shqcMentionStatInfo.totalCurrency:'--')"></div>
                                <div style="color: #595959">累积</div>
                            </div>

                            <div style="float: right;width: 50%;text-align: center;">
                                <div style="font-size: 24px;font-weight: bold;" v-text="shqcMentionStatInfo.yesCurrency==0?0:(shqcMentionStatInfo.yesCurrency?shqcMentionStatInfo.yesCurrency:'--')"></div>
                                <div style="color: #595959">昨日</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card" style="margin-bottom: 0px;">
                    <div class="layui-card-header">
                        <h3><b>手续费趋势图</b></h3>
                        <div style="width: 60px;position: absolute;right: 50px;top: -3px;">
                            <div class="layui-inline">
                                <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" name="time" v-model="time" class="layui-input" id="time">
                                    <i class="layui-icon layui-icon-date date-icon"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div id="charts" style="width: 100%;"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/module/index/config.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table','laydate','echarts'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate;
            echarts = layui.echarts;

        var height = window.innerHeight;

        var vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                transStatInfo:{},
                shqcMentionStatInfo:{},
                usdtMentionStatInfo:{},
                serviceChargeStatInfoList:[],
                date:[],
                transAccountAmountList:[],
                usdtMentionAmountList:[],
                shqcMentionAmountList:[],
                time:"",
                year:'',
                month:'',
                charts:{}
            },
            mounted:function(){
                this.init();
                this.lineCharts();
                this.getStatInfo();
            },
            methods: {
                getCurrTime:function() {
                    this.year = new Date().getFullYear();
                    var month = new Date().getMonth()+1;
                    if(month.toString().length ==1) {
                        month = '0'+month;
                    }
                    this.month = month;
                    this.time = this.year+'-'+this.month;
                },
                init:function(){
                    var that = this;
                    $("#charts").height(height - 190);
                    that.charts = echarts.init(document.getElementById('charts'));
                    laydate.render({
                        elem: '#time',
                        change:function(value,date,endDate){
                            that.year = date.year;
                            that.month = date.month;
                            that.lineCharts();
                        },
                        type: 'month',
                        value: new Date()
                    });
                    this.getCurrTime();
                },
                lineCharts:function(){
                    var that = this;
                    this.getServiceChargeStatInfo(function(date){
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            legend: {
                                data: ['SHQC转账手续费', 'USDT提币手续费', 'SHQC提币手续费']
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: that.date
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: 'SHQC转账手续费',
                                    type: 'line',
                                    areaStyle: {},
                                    data: that.transAccountAmountList
                                },
                                {
                                    name: 'USDT提币手续费',
                                    type: 'line',
                                    areaStyle: {},
                                    data: that.usdtMentionAmountList
                                },
                                {
                                    name: 'SHQC提币手续费',
                                    type: 'line',
                                    areaStyle: {},
                                    data: that.shqcMentionAmountList
                                }
                            ]
                        };
                        that.charts.setOption(option,true);
                    });
                },
                shqcTransferDetail:function(){
                    var self = this;
                    var url = wp.resUrl('/wpui-admin/wp-ewallet-admin/module/wallet/wallet-transfer-query.html');
                    var title = '转账记录查询';

                    // 添加到tab
                    var iframeWindow = wp.addTab(url,title);
                    var data = {};
                    iframeWindow.data = data;

                },
                mentionDetail:function(title, moneyType){
                    var self = this;
                    var url = wp.resUrl('/wpui-admin/wp-ewallet-admin/module/wallet/wallet-apply-mention-query.html');

                    // 添加到tab
                    var iframeWindow = wp.addTab(url,title);
                    var data = {};
                    data.opener = 'fee';
                    data.moneyType = moneyType;
                    iframeWindow.data = data;

                },
                getStatInfo:function() {
                    var that = this;
                    wp.httpGet({
                        url:wp.url('/wp/ewallet/wallet/serviceCharge/getStatInfo'),
                        success:function(data) {
                            that.transStatInfo = data.dataBody.transStatInfoDto;
                            that.shqcMentionStatInfo = data.dataBody.shqcMentionStatInfoDto;
                            that.usdtMentionStatInfo = data.dataBody.usdtMentionStatInfoDto;
                        }
                    })
                },
                getServiceChargeStatInfo:function(callback) {
                    var that = this;

                    wp.httpGet({
                        url:wp.url('/wp/ewallet/wallet/serviceCharge/getServiceChargeStatInfo'),
                        data:{
                            year:that.year,
                            month:that.month
                        },
                        success:function(data) {
                            that.serviceChargeStatInfoList = data.dataBody;

                            // 先清空数组
                            that.transAccountAmountList = [];
                            that.usdtMentionAmountList = [];
                            that.shqcMentionAmountList = [];
                            that.date = [];

                            for(var i=0; i<that.serviceChargeStatInfoList.length; i++) {
                                var date = that.serviceChargeStatInfoList[i].date.split('-')[2];
                                if(date.startsWith('0')) {
                                    that.date[i] = date.split('0')[1];
                                }else{
                                    that.date[i] = date;
                                }
                                that.transAccountAmountList[i] = that.serviceChargeStatInfoList[i].transAccountAmount;
                                that.usdtMentionAmountList[i] = that.serviceChargeStatInfoList[i].usdtMentionAmount;
                                that.shqcMentionAmountList[i] = that.serviceChargeStatInfoList[i].shqcMentionAmount;
                            }

                            that.$nextTick(function(){
                                callback(that.date);
                            });
                        }
                    })
                }

            }
        });
    });
</script>
<script>

</script>

</body>
</html>